<template>
  <a-card :bordered="false">
    <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="手牌名称" name="name">
            <a-input v-model:value="searchFormState.name" placeholder="请输入手牌名称" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="6">
					<a-form-item label="手牌内码" name="code">
						<a-input v-model:value="searchFormState.code" placeholder="请输入手牌内码" />
					</a-form-item>
				</a-col> -->
        <a-col :span="6">
          <a-form-item label="手牌类型" name="handType">
            <a-select v-model:value="searchFormState.handType" placeholder="请输入手牌类型">
              <a-select-option v-for="item in handTypeList" :value="item.handType">{{ item.typeName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="6" v-show="advanced">
					<a-form-item label="状态  00空闲  01停用 02 服务中 03 客人进场" name="state">
						<a-input
							v-model:value="searchFormState.state"
							placeholder="请输入状态  00空闲  01停用 02 服务中 03 客人进场"
						/>
					</a-form-item>
				</a-col> -->
        <a-col :span="6">
          <a-button type="primary" @click="table.refresh(true)">查询</a-button>
          <a-button style="margin: 0 8px" @click="reset">重置</a-button>
          <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a> -->
        </a-col>
      </a-row>
    </a-form>
    <s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert.show" bordered
      :row-key="(record) => record.id" :tool-config="toolConfig" :row-selection="options.rowSelection">
      <template #operator class="table-operator">
        <a-space>
          <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizHandAdd')">
            <template #icon><plus-outlined /></template>
            新增
          </a-button>
          <a-button type="primary" @click="bizHandCateAddRef.onOpen()" v-if="hasPerm('bizHandCateAdd')">
            <template #icon><plus-outlined /></template>
            新增手牌类型
          </a-button>
          <xn-batch-delete v-if="hasPerm('bizHandBatchDelete')" :selectedRowKeys="selectedRowKeys"
            @batchDelete="deleteBatchBizHand" />
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'handType'">
          {{ handTypeList.length && getHandType(record) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a @click="formRef.onOpen(record)" v-if="hasPerm('bizHandEdit')">编辑</a>
            <a-divider type="vertical" v-if="hasPerm(['bizHandEdit', 'bizHandDelete'], 'and')" />
            <a-popconfirm title="确定要删除吗？" @confirm="deleteBizHand(record)">
              <a-button type="link" danger size="small" v-if="hasPerm('bizHandDelete')">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </s-table>
  </a-card>
  <Form ref="formRef" :handTypeList="handTypeList" @successful="table.refresh(true)" />
  <AddCateHandType ref="bizHandCateAddRef" />
</template>

<script setup name="hand">
import Form from './form.vue'
import AddCateHandType from './addCateHandType.vue'
import bizHandTypeApi from '@/api/biz/bizHandTypeApi'
import bizHandApi from '@/api/biz/bizHandApi'
let searchFormState = reactive({})
const bizHandCateAddRef = ref()
const searchFormRef = ref()
const table = ref()
const formRef = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
  advanced.value = !advanced.value
}
const columns = [
  {
    title: '手牌名称',
    dataIndex: 'name'
  },
  // {
  // 	title: '手牌内码',
  // 	dataIndex: 'code'
  // },
  {
    title: '手牌类型',
    // 01 消费手牌 02 男宾手牌 03 女宾手牌  04 儿童手牌 05 VIP手牌 09 其他手牌 
    dataIndex: 'handType'
  },
  // {
  // 	title: '状态  00空闲  01停用 02 服务中 03 客人进场',
  // 	dataIndex: 'state'
  // },
  // {
  // 	title: '备注',
  // 	dataIndex: 'remark'
  // }
]
// 操作栏通过权限判断是否显示
if (hasPerm(['bizHandEdit', 'bizHandDelete'])) {
  columns.push({
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: '150px'
  })
}
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
  // columns数字类型字段加入 needTotal: true 可以勾选自动算账
  alert: {
    show: true,
    clear: () => {
      selectedRowKeys.value = ref([])
    }
  },
  rowSelection: {
    onChange: (selectedRowKey, selectedRows) => {
      selectedRowKeys.value = selectedRowKey
    }
  }
}
let handTypeList = ref([])
const loadHandType = () => {
  bizHandTypeApi.bizHandTypePage().then(res => {
    handTypeList.value = res.records
  })
}
loadHandType()
const loadData = (parameter) => {
  const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
  return bizHandApi.bizHandPage(Object.assign(parameter, searchFormParam)).then((data) => {
    return data
  })
}
// 重置
const reset = () => {
  searchFormRef.value.resetFields()
  table.value.refresh(true)
}
// 删除
const deleteBizHand = (record) => {
  let params = {
    id: [
      record.id
    ]
  }
  bizHandApi.bizHandDelete(params).then(() => {
    table.value.refresh(true)
  })
}
// 批量删除
const deleteBatchBizHand = (params) => {
  let fparams = {id:params.map(v=>v.id)}
  bizHandApi.bizHandDelete(fparams).then(() => {
    table.value.clearRefreshSelected()
  })
}
const getHandType = (record) => {
  let result = ''
  handTypeList.value.map(v => {
    if (v.handType == record.handType) {
      result = v.typeName
    }
  })
  return result
}
</script>
